import React from 'react';
import styled from 'styled-components';
import { Button, Divider, Tooltip, Space } from 'antd';
import { 
  MergeCellsOutlined, 
  SplitCellsOutlined,
  PlusOutlined,
  DeleteOutlined,
  ArrowDownOutlined,
  ArrowRightOutlined
} from '@ant-design/icons';

const ToolBarContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #f0f2f5;
  border-right: 1px solid #d9d9d9;
  width: 200px;
  box-shadow: 2px 0 8px rgba(0,0,0,0.05);
`;

const ToolGroup = styled.div`
  margin-bottom: 20px;
  background-color: white;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
`;

const ToolTitle = styled.h3`
  margin-bottom: 12px;
  font-size: 16px;
  color: #1890ff;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
`;

const ButtonGroup = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
`;

const StyledButton = styled(Button)`
  text-align: left;
  display: flex;
  align-items: center;

  .anticon {
    margin-right: 8px;
  }
`;

interface ToolBarProps {
  onMerge: (direction: 'row' | 'column') => void;
  onAddRow: () => void;
  onAddColumn: () => void;
  onDeleteRow: () => void;
  onDeleteColumn: () => void;
}

const ToolBar: React.FC<ToolBarProps> = ({ 
  onMerge, 
  onAddRow, 
  onAddColumn, 
  onDeleteRow, 
  onDeleteColumn 
}) => {
  return (
    <ToolBarContainer>
      <h2 style={{ marginBottom: '16px', textAlign: 'center' }}>表格工具</h2>
      
      <ToolGroup>
        <ToolTitle>合并操作</ToolTitle>
        <ButtonGroup>
          <Tooltip title="合并选中的行" placement="right">
            <StyledButton 
              icon={<MergeCellsOutlined rotate={90} />} 
              onClick={() => onMerge('row')}
            >
              合并行
            </StyledButton>
          </Tooltip>
          
          <Tooltip title="合并选中的列" placement="right">
            <StyledButton 
              icon={<MergeCellsOutlined />} 
              onClick={() => onMerge('column')}
            >
              合并列
            </StyledButton>
          </Tooltip>
        </ButtonGroup>
      </ToolGroup>
      
      <ToolGroup>
        <ToolTitle>添加结构</ToolTitle>
        <ButtonGroup>
          <Tooltip title="添加新行" placement="right">
            <StyledButton icon={<ArrowDownOutlined />} onClick={onAddRow}>添加行</StyledButton>
          </Tooltip>
          <Tooltip title="添加新列" placement="right">
            <StyledButton icon={<ArrowRightOutlined />} onClick={onAddColumn}>添加列</StyledButton>
          </Tooltip>
        </ButtonGroup>
      </ToolGroup>
      
      <ToolGroup>
        <ToolTitle>删除结构</ToolTitle>
        <ButtonGroup>
          <Tooltip title="删除选中的行" placement="right">
            <StyledButton icon={<DeleteOutlined />} danger onClick={onDeleteRow}>删除行</StyledButton>
          </Tooltip>
          <Tooltip title="删除选中的列" placement="right">
            <StyledButton icon={<DeleteOutlined />} danger onClick={onDeleteColumn}>删除列</StyledButton>
          </Tooltip>
        </ButtonGroup>
      </ToolGroup>
      
      <div style={{ padding: '12px', borderRadius: '4px', backgroundColor: '#f9f9f9', marginTop: 'auto' }}>
        <Space direction="vertical" style={{ width: '100%' }}>
          <small style={{ color: '#888' }}>操作提示：</small>
          <small>1. 先选择单元格</small>
          <small>2. 点击合并按钮</small>
          <small>3. 双击可编辑内容</small>
        </Space>
      </div>
    </ToolBarContainer>
  );
};

export default ToolBar; 